<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <!-- 主表单区域 -->
            <a-form :form="form" slot="detail">
                <a-row>
                    <!--  <a-col :span="24" >
            <a-form-item  label="货物名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select mode="multiple" v-decorator="['huaxuepinmingcheng',validatorRules.huaxuepinmingcheng]" @change="getByhuaxuepin" placeholder="请选择货物名称">
                <a-select-option v-for="item in this.huaxuepinList" :value="item">
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-item>
         

          </a-col>
    
          <a-col :span="24" >
            <a-form-item label="仓库名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-decorator="['cangkumingcheng',validatorRules.cangkumingcheng]" @change="getBycangkumingcheng" placeholder="请选择仓库" >
                <a-select-option v-for="item in this.cangkumingList" :value="item">
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
                    <!-- <a-col :span="24" >
            <a-form-item label="货架号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-decorator="['huojiahao']" @change="getByHuojiahao" placeholder="请选择货架号" >
                <a-select-option v-for="item in this.huojiahaoList" :value="item">
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->

                    <a-col :span="24">
                        <a-form-item label="盘点人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-select v-decorator="['pandianren',validatorRules.pandianren]"
                                placeholder="请输入盘点人">
                                <a-select-option v-for="item in RenyuanList" :value="item"
                                    :key="item">{{ item }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="盘点时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-date v-decorator="['pandianshijian',validatorRules.pandianshijian]"
                                placeholder="请输入更新时间" :trigger-change="true" :show-time="true"
                                date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
                        </a-form-item>
                    </a-col>
                    <!-- <a-col :span="24" >
            <a-form-item label="签字" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-image-upload isMultiple  v-decorator="['qianzi']" ></j-image-upload>
            </a-form-item>
          </a-col> -->

                    <a-col :span="24">
                        <a-form-item label="计划名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['jihuamingcheng' ,validatorRules.jihuamingcheng]"
                                placeholder="请输入计划名称"></a-input>
                        </a-form-item>
                    </a-col>

                    <!-- <a-col :span="24" >
            <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['zhuangtai']" placeholder="请输入状态" ></a-input>
            </a-form-item>
          </a-col> -->
                </a-row>
            </a-form>
        </j-form-container>
        <!-- 子表单区域 -->
        <a-tabs v-model="activeKey" @change="handleChangeTabs">
            <a-tab-pane tab="需盘点明细" :key="refKeys[0]" :forceRender="true">
                <j-editable-table :ref="refKeys[0]" :loading="yzdPandianjihuaziTable.loading"
                    :columns="yzdPandianjihuaziTable.columns"
                    :dataSource="yzdPandianjihuaziTable.dataSource" :maxHeight="300"
                    :disabled="formDisabled" :rowNumber="true" :rowSelection="true"
                    :actionButton="true">
                    <template v-slot:action1="props">
                        <div>
                            <a-select style="width: 175px" :default-value="props.value"
                                @change="(value)=> sethuaxuepin(value,props)">
                                <a-select-option v-for="item in huaxuepinList" :value="item"
                                    :trigger-change="true" :key="item">
                                    {{ item }}
                                </a-select-option>
                            </a-select>
                        </div>
                    </template>

                    <template v-slot:action2="props">
                        <div>
                            <a-select style="width: 175px" :default-value="props.value"
                                @change="(value)=> setcangkumingcheng(value,props)">
                                <a-select-option v-for="item in cangkumingList" :value="item"
                                    :trigger-change="true" :key="item">
                                    {{ item }}
                                </a-select-option>
                            </a-select>
                        </div>
                    </template>
                </j-editable-table>
            </a-tab-pane>
        </a-tabs>
        <a-row v-if="showFlowSubmitButton"
            style="text-align: center;width: 100%;margin-top: 16px;"><a-button @click="handleOk">提
                交</a-button></a-row>
    </a-spin>
</template>

<script>

import pick from 'lodash.pick'
import { getAction, postAction } from '@/api/manage'
import { FormTypes, getRefPromise } from '@/utils/JEditableTableUtil'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
import { validateDuplicateValue } from '@/utils/util'
import { get } from 'lodash'

export default {
    name: 'YzdPandianjihuaForm',
    mixins: [JEditableTableMixin],
    components: {
    },
    data() {
        return {
            RenyuanList: [],
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            labelCol2: {
                xs: { span: 24 },
                sm: { span: 3 },
            },
            wrapperCol2: {
                xs: { span: 24 },
                sm: { span: 20 },
            },
            // 新增时子表默认添加几行空数据
            addDefaultRowNum: 1,
            refKeys: ['yzdPandianjihuazi',],
            tableKeys: ['yzdPandianjihuazi',],
            activeKey: 'yzdPandianjihuazi',
            // 盘点计划子表
            yzdPandianjihuaziTable: {
                loading: false,
                dataSource: [],
                columns: [
                    {
                        title: '仓库名称',
                        key: 'cangkumingcheng',
                        type: FormTypes.slot,
                        slotName: 'action2',
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                        // disabled: true
                    },
                    // {
                    //   title: '货架号',
                    //   key: 'huojiaweizhi',
                    //   type: FormTypes.input,
                    //   width:"200px",
                    //   placeholder: '请输入${title}',
                    //   defaultValue:'',
                    //   // disabled: true
                    // },
                    {
                        title: '货物名称',
                        key: 'huaxuepinmingcheng',
                        type: FormTypes.slot,
                        slotName: 'action1',
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                        // disabled: true
                    },
                    // {
                    //   title: '批次号',
                    //   key: 'picihao',
                    //   type: FormTypes.input,
                    //   width:"200px",
                    //   placeholder: '请输入${title}',
                    //   defaultValue:'',
                    //   disabled: true
                    // },
                    {
                        title: '数量',
                        key: 'zhongliang',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                        // disabled: true
                    },

                    // {
                    //   title: '父id',
                    //   key: 'pid',
                    //   type: FormTypes.input,
                    //   width:"200px",
                    //   placeholder: '请输入${title}',
                    //   defaultValue:'',
                    // },
                ]
            },
            validatorRules: {
                jihuamingcheng: { rules: [{ required: true, message: '请输入计划名称!' }] },
                pandianren: { rules: [{ required: true, message: '请选择盘点人!' }] },
                pandianshijian: { rules: [{ required: true, message: '请选择盘点时间!' }] },
                huaxuepinmingcheng: { rules: [{ required: true, message: '请选择盘点时间!' }] },
                cangkumingcheng: { rules: [{ required: true, message: '请选择盘点时间!' }] },
            },
            url: {
                getByhuojiahao: "/yzd_pandianmingxi/yzdPandianjihua/getByHuojiahao",
                getBycangku: "/yzd_pandianmingxi/yzdPandianjihua/getByCangkuming",
                huojihao: "/yzd_jichuxinxi/yzdZhucuncangkuxinxi/findhuojiahao",
                cangkuming: "/yzd_jichuxinxi/yzdZhucuncangkuxinxi/huoQuCangKu",
                getzi: "/yzd_pandianmingxi/yzdPandianjihua/getByHuaXuePin",
                select: "/yzd_jichuxinxi/yzdWeixianfeiwuxinxi/list",
                add: "/yzd_pandianmingxi/yzdPandianjihua/add",
                edit: "/yzd_pandianmingxi/yzdPandianjihua/edit",
                queryById: "/yzd_pandianmingxi/yzdPandianjihua/queryById",
                yzdPandianjihuazi: {
                    list: '/yzd_pandianmingxi/yzdPandianjihua/queryYzdPandianjihuaziByMainId'
                },
                renyuanurl: "/menjin/menjinrenyuan/list",
            },
            huaxuepinList: [],
            cangkumingList: [],
            huojiahaoList: [],
            huaxuepinmingcheng: [],
            cangkumingcheng1: ""
        }
    },
    props: {
        //流程表单data
        formData: {
            type: Object,
            default: () => { },
            required: false
        },
        //表单模式：false流程表单 true普通表单
        formBpm: {
            type: Boolean,
            default: false,
            required: false
        },
        //表单禁用
        disabled: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    computed: {
        formDisabled() {
            if (this.formBpm === true) {
                if (this.formData.disabled === false) {
                    return false
                }
                return true
            }
            return this.disabled
        },
        showFlowSubmitButton() {
            if (this.formBpm === true) {
                if (this.formData.disabled === false) {
                    return true
                }
            }
            return false
        }
    },
    created() {
        //如果是流程中表单，则需要加载流程表单data
        this.showFlowData();
        this.getselect();
        this.getcangkumingcheng();
        this.huojiahaoList = []
        this.getrenyuan();
        var date = new Date();
        var year = date.getFullYear(); //月份从0~11，所以加一
        let month = date.getMonth();
        console.log("month", month);
        var dateArr = [
            date.getMonth() + 1,
            date.getDate(),
            date.getHours(),
            date.getMinutes(),
            date.getSeconds(),
        ];
        //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
        for (var i = 0; i < dateArr.length; i++) {
            if (dateArr[i] >= 1 && dateArr[i] <= 9) {
                dateArr[i] = "0" + dateArr[i];
            }
        }
        var strDate =
            year + "" +
            dateArr[0] + "" +
            dateArr[1];
        console.log('111111111' + strDate);
        var a = strDate + '盘点计划'
        this.$nextTick(() => {
            this.form.setFieldsValue({
                jihuamingcheng: a
            })
        })
    },
    methods: {


        setcangkumingcheng(arr, row) {
            this.cangkuming = arr
            this.huojiahaolist = [];
            this.$refs.yzdPandianjihuazi.setValues([{
                'rowKey': row.rowId, values: {
                    'cangkumingcheng': arr
                }
            }]);
        },

        sethuaxuepin(arr, row) {
            this.huaxuepin = arr
            this.$refs.yzdPandianjihuazi.setValues([{
                'rowKey': row.rowId, values: {
                    'huaxuepinmingcheng': arr
                }
            }]);
        },
        getrenyuan() {
            getAction(this.url.renyuanurl).then(res => {
                console.log(res);
                res.result.records.forEach(element => {
                    this.RenyuanList.push(element.name);
                })
            })
        },
        getByHuojiahao(arr) {
            var re = {
                "huojiaweizhi": arr
            }
            getAction(this.url.getByhuojiahao, re).then(res => {
                this.yzdPandianjihuaziTable.dataSource = res.result
            })
        },


        getByhuaxuepin(arr) {
            if (arr != null || arr != "" || arr != undefined) {
                this.validatorRules.huaxuepinmingcheng.rules[0].required = false
                this.validatorRules.cangkumingcheng.rules[0].required = false
            }
            console.log(arr);
            this.huaxuepinmingcheng = arr
            var re = {
                "cangkumingcheng": this.cangkumingcheng1,
                "huaxuepinmingcheng": this.huaxuepinmingcheng
            }
            postAction(this.url.getBycangku, re).then(res => {
                console.log(res);
                this.yzdPandianjihuaziTable.dataSource = res.result
            })
        },

        getBycangkumingcheng(arr) {
            this.cangkumingcheng1 = arr
            if (arr != null || arr != "" || arr != undefined) {
                validatorRules.huaxuepinmingcheng.rules[0].required = false
                validatorRules.cangkumingcheng.rules[0].required = false
            }
            var re = {
                "cangkumingcheng": this.cangkumingcheng1,
                "huaxuepinmingcheng": this.huaxuepinmingcheng
            }
            console.log(this.huaxuepinmingcheng);
            // getAction(this.url.huojihao,re).then(res =>{
            //   res.result.forEach(element => {
            //   console.log(element);
            //   this.huojiahaoList.push(element.huojiahao)
            // })
            // })
            postAction(this.url.getBycangku, re).then(res => {
                console.log(res);
                this.yzdPandianjihuaziTable.dataSource = res.result
                this.cangkumingcheng1 = '',
                    this.huaxuepinmingcheng = []
            })
        },
        getcangkumingcheng() {
            getAction(this.url.cangkuming).then(res => {
                console.log(res);
                res.result.forEach(element => {
                    this.cangkumingList.push(element.cangkumingcehng)
                })
            })
        },
        getselect() {
            getAction(this.url.select).then(res => {
                // console.log(res);
                res.result.records.forEach(element => {
                    this.huaxuepinList.push(element.huaxuepinmingcheng)
                })
            })
        },







        addBefore() {
            this.form.resetFields()
            this.yzdPandianjihuaziTable.dataSource = []
        },
        getAllTable() {
            let values = this.tableKeys.map(key => getRefPromise(this, key))
            return Promise.all(values)
        },
        /** 调用完edit()方法之后会自动调用此方法 */
        editAfter() {
            let fieldval = pick(this.model, 'pandianren', 'pandianshijian', 'cangkumingcheng', 'huaxuepinmingcheng', 'jihuamingcheng', 'zhuangtai', 'huojiahao')

            this.$nextTick(() => {
                this.form.setFieldsValue(fieldval)
            })
            // 加载子表数据
            if (this.model.id) {
                let params = { id: this.model.id }
                this.requestSubTableData(this.url.yzdPandianjihuazi.list, params, this.yzdPandianjihuaziTable)
            }
        },
        /** 整理成formData */
        classifyIntoFormData(allValues) {
            // console.log("11111111111111111111111111111111");
            let main = Object.assign(this.model, allValues.formValue)
            // console.log( );
            // var cangku = allValues.formValue.cangkumingcheng
            // var huaxuepin= allValues.formValue.huaxuepinmingcheng
            // if(!(cangku==""||cangku==null||cangku==undefined) && !(huaxuepin==""||huaxuepin==null||huaxuepin==undefined)){
            //   return;
            // }

            return {
                ...main, // 展开
                yzdPandianjihuaziList: allValues.tablesValue[0].values,
            }
        },
        //渲染流程表单数据
        showFlowData() {
            if (this.formBpm === true) {
                let params = { id: this.formData.dataId };
                getAction(this.url.queryById, params).then((res) => {
                    if (res.success) {
                        this.edit(res.result);
                    }
                })
            }
        },
        validateError(msg) {
            this.$message.error(msg)
        },
        popupCallback(row) {
            this.form.setFieldsValue(pick(row, 'pandianren', 'pandianshijian', 'cangkumingcheng', 'huaxuepinmingcheng', 'jihuamingcheng', 'zhuangtai', 'huojiahao'))
        },

    }
}
</script>

<style scoped>
</style>